<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <script>

            var xmlHttp = false;

            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e2) {
                    xmlHttp = false;
                }
            }

            if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
                xmlHttp = new XMLHttpRequest();
            }
            
            function callServer() {
                
                var user = document.getElementById("city").value;
                var pass = document.getElementById("state").value;

                var url = "code.php?city=" + escape(user) + "&state=" + escape(pass );

                xmlHttp.open("GET", url, true);

                xmlHttp.onreadystatechange = updatePage;

                xmlHttp.send(null);
            }
            
            function updatePage() {
                if (xmlHttp.readyState == 4) {
                    document.getElementById("zipCode").value = xmlHttp.responseText;
                }
            }
            
        </script>

        <form>
            <p>User: <input type="text" name="city" id="city" onChange="callServer();" /></p>
            <p>Pass: <input type="text" name="state" id="state" onChange="callServer();" /></p>
            <p>Hello message: <input type="text" name="zipCode" id="zipCode" /></p>
        </form>

    </body>
</html>
